<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            background: url(images/banner01.jpg);
        }

        .box {
            width: 300px;
            height: 100px;
            background-color: #000000;
            color: #ffffff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            /* 元素透明的写法 */
            opacity: 0.3;
            filter: alpha(opacity=30);
        }

        .box2 {
            width: 300px;
            height: 100px;
            background-color: rgba(0,0,0,0.3);
            color: #ffffff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            margin-top: 50px ;
        }
    </style>
</head>

<body>
    <div class="box">这是一个DIV</div>
    <div class="  box2">这是第二个DIV</div>
</body>

</html>